<template>
  <div>
    <h1>bind函数</h1>
  </div>
</template>

<script setup>
function fn1(a, b, c) {
  console.log(this, 'this')
  console.log(a, b, c)
  return 'this is fn1'
}

const fn2 = fn1.bind({ x: 100 }, 100, 200, 300)
const res = fn2()
console.log(res)

Function.prototype.myBind = function (context) {
  // 判断调用对象是否为函数
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  // 获取参数
  let args = [...arguments].slice(1)
//   console.log([...arguments],'args');
  let fn = this
  return function Fn() {
    // 根据调用方式，传入不同绑定值
    return fn.apply(context, args)
  }
}
const fn3 = fn1.myBind({ x: 100 }, 100, 200, 300)
const res2 = fn3()
console.log(res2)
</script>

<style scoped></style>
